<template>
  <div>
    
    <h1>分类管理</h1>
    <!-- 分类数据 -->
    <Tree :data="data4" ref="tree" show-checkbox multiple @on-check-change="choice"></Tree>
    <!-- 修改按钮 -->
    <Button type="primary" icon="ios-paper-outline" @click="modal1 = true" :disabled="isAble">修改</Button>
    <!-- 删除按钮 -->
    <Button type="error" icon="md-close-circle" @click="delData" class="delBtn">删除</Button>
    <!-- 修改弹出层 -->
    <Modal v-model="modal1" title="分类修改" @on-ok="ok" @on-cancel="cancel">
      <Form ref="formValidate" >
        <FormItem lable="当前分类id">
          <span>当前分类id</span><Input v-model="cID" size="large" placeholder="large size" readonly class="editInput"/>
        </FormItem>

        <FormItem lable="上级分类">
          <span>上级分类</span><Input v-model="value1" size="large" placeholder="large size" readonly class="editInput"/>
        </FormItem>

        <FormItem lable="分类名称"  prop="changeName">
          <Tooltip content="请输入10位以内中文" placement="bottom-start" >
            <span>分类名称</span><Input v-model="value2" size="large" placeholder="large size" maxlength="10" class="editInput"/>
          </Tooltip>
        </FormItem>

      </Form>
    </Modal>
    
  </div>
</template>

<script>
import {Admin_categoryGetData} from '../../../server/home.js'
import {Admin_classify} from '../../../server/home.js'
import {Admin_classifyEdit} from '../../../server/home.js'
import {Admin_classifyDel} from '../../../server/home.js'
export default {
  data() {
    return {
      data4:[],//分类数据
      modal1: false,
      value1:'',//修改框中上级分类
      value2:'',//修改框中分类名称
      cID:'',//修改框中的当前id
      subdata:'',
      isAble:false
    };
  },
  methods: {
    
    // 获取分类数据

    getClassData(){
      var than = this;
      Admin_classify().then(res=>{//调用后端传回的数据

        let arr= []
        for (var itemObj of res.data) {
          if (itemObj.fid == 0) {//当父级id=0时，当前分类为一级分类（总分类）
            itemObj.expand = true;
            itemObj.children = [] ; //为一级分类添加子分类
            arr.push(itemObj);
          
            for (var itemObj2 of res.data){
              if (itemObj2.fid == itemObj.cid){
                itemObj.children.push(itemObj2) ; 
              }
            }
          }
        };
        this.data4 = arr
        
      })
    },
    
    // 获取节点数据
    choice(){
      var than = this;
      than.subdata = this.$refs.tree.getCheckedNodes();

      if(than.subdata.length>1){
        this.$Message.warning('每次只能修改一个分类');
        than.isAble = true;
      }else{
        than.isAble = false;
        //修改框中显示勾选的数据
        for(var item of than.data4){
          if(than.subdata[0].fid == item.cid){
            than.value1 = item.title;
          }
        }
        than.cID = than.subdata[0].cid;
        than.value2 = than.subdata[0].title;
        return than.isAble;
      }
      
    },

    // 确认修改
    ok () {
        var id = this.cID;
        var newName = this.value2;
   
        var reg = /^[\u4e00-\u9fa5]{1,10}$/;//中文判断
        if(newName == ''){//
          this.$Message.warning('请输入修改的分类名称');
        }else if(newName.match(reg) == null){
          this.$Message.error('您输入的名称不是中文');
        }else{
          Admin_classifyEdit(id,newName).then(res=>{
            if(res.err_code==1000){
              this.$Message.success(res.message);
              this.getClassData()
              // location.reload();
            }else{
              this.$Message.error(res.message);
            }
            
          })
        }
        

    },
    // 取消修改
    cancel () {
        this.$Message.info('您已取消修改');
    },

    // 删除
    delData(){
      const childrenList = this.data4[0].children//声明变量获取所有二级分类
      let list = childrenList.filter(v=>v.checked)//声明变量list，将所有选中的二级分类遍历添加进list中
      let idList = []

      //调用提示方法
      this.$show.show1({
        title:'删除提示',
        content:'是否确认删除所选项？'
      }).then(res=>{
        for(var item of list){
          idList.push(item.cid);//添加进删除id数组
        }
        if(idList == []){
          this.$Message.warning('请选择需要删除的分类');
        }else{
          Admin_classifyDel(idList).then(res=>{
            if(res.err_code ==1000){
              this.getClassData()

              this.$Message.success(res.message);

            }else{
              this.$Message.error(res.message);
            }
            
          })
        }
        
      })

    }
    
  },
  created() {
    // this.getData()
    this.getClassData()
  }
};
</script>

<style scoped>
  .editInput{
    width: 67ex;
  }
  .delBtn{
    margin-left: 2ex;
  }
</style>
